<template>
	<view class="content">
		<view class="search">
			<view class="search-box">
				<uni-icons type="search" size="16" color="#AAAAAA"></uni-icons>
				<input type="text" v-model="value" @input="clearInput" placeholder="请输入学生名称">
				<uni-icons type="close" size="20" color="#999" v-if="showClearIcon" @click="clearIcon"></uni-icons>
			</view>
			<button @click="secList">搜索</button>
		</view>
		<view v-if="listData.length>0">
			<view class="student-score" v-for="(item,index) in listData" @click="gotoPage(item)">
				<view class="student-top">
					<view class="top-l">
						<text :class="item.sj_sex==1?'ns-sex sex-box':'nan-sex sex-box'">{{item.sj_sex==1?'女':'男'}}</text>
						<text>{{item.xs_name}}</text>
					</view>
					<text>{{item.bj_name}}</text>
				</view>
				<view class="score-list">
					<view :class="itemm.cj=='不及格'?'score-fs score-bjg':'score-fs score-jg'" v-for="itemm in item.score">
						<view class="score-l">
							<text>{{itemm.fs}}</text>
							<text>{{itemm.cj}}</text>
						</view>
						<view class="score-r">
							<image :src="'/static/images/item'+itemm.id+'.png'" mode="widthFix"></image>
							<text>{{itemm.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="noMore" class="no-more">
				<text>没有更多</text>
			</view>
		</view>
		<!-- 空状态 -->
		<view class="null-box" v-if="listData.length==0">
			<image src="/static/images/null.png" mode="widthFix"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				tcnameid:'',
				showClearIcon: false,
				listData: [],
				pageNum:1,
				pageSize:6,
				noMore: false
			}
		},
		onLoad(options) {
			this.tcnameid = options.id
			this.getList()
		},
		onShow() {

		},
		onReachBottom() {
		    if (!this.noMore) {
		      this.pageNum++
		      this.getList()
		    }
		},
		methods: {
			secList(){
				if(this.value==''){
					this.toast('请输入搜索内容')
					return false
				}else{
					this.pageNum = 1
					this.listData = []
					this.getList()
				}
			},
			async getList() {
				let res=await this.http('get','/tc/tcOperate/getStudentScoreMax',{
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					tcnameid:this.tcnameid,
					sname:this.value
				})
				if(res.code==200){
					console.log(res)
					const result = res.rows.map(item => {
					  const proList = [];
					  // 提取每个对象中以"pro"开头的属性:ml-citation{ref="3,6" data="citationList"}
					  for (const [key, value] of Object.entries(item)) {
					    if (/^pro\d+$/.test(key)) {
					      const parts = value.split('|'); // 分割字符串:ml-citation{ref="3,6" data="citationList"}
					      const id = parseInt(key.match(/\d+/)[0]); // 提取属性名中的数字作为id:ml-citation{ref="3" data="citationList"}
					      proList.push({
					        id: id,
					        name: parts[0],  // 第一个字段为项目名称
					        fs: parts[2],    // 第三个字段为分数（fs）
					        cj: parts[3],     // 第四个字段为等级（cj）
							qid: parts[5]	//队列id
					      });
					    }
					  }
					  return { ...item,score: proList };
					});
					// this.listData = result
					// 数据拼接处理
					this.listData = [...this.listData, ...result]
					// 判断是否还有数据
					this.noMore = res.rows.length < 6
				}
			},
			gotoPage(row){
				console.log(row)
				// let qid = row.score.map(item => item.qid).join(',')
				let qid = [...new Set(row.score.map(item => item.qid))];
				let result = qid.join(',');
				uni.navigateTo({
					url:'/pages/score/scoreDetails?id='+row.sj_xsid+'&qId='+result
				})
			},
			clearInput: function(event) {
				this.value = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.value = '';
				this.showClearIcon = false;
				this.pageNum = 1
				this.listData = []
				this.getList()
			},
		}
	}
</script>

<style lang="less">
	.search {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20upx;

		.search-box {
			display: flex;
			align-items: center;
			width: calc(100% - 144upx);
			height: 56upx;
			border-radius: 86upx;
			background: #F5F7F9;
			padding: 0 20upx;
			box-sizing: border-box;

			input {
				width: 90%;
				font-size: 24upx;
				margin-left: 10upx;
			}
		}

		button {
			width: 124upx;
			height: 56upx;
			border-radius: 32upx;
			background: linear-gradient(180deg, #4F9FE0 0%, #3673E1 100%);
			font-size: 24upx;
			color: #fff;
			margin: 0;
		}
	}

	.student-score {
		width: 100%;
		margin-bottom: 20upx;
		border-radius: 8upx;
		background: #F0F7FA;
		padding: 20upx;
		box-sizing: border-box;

		.student-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20upx;

			.top-l {
				display: flex;
				align-items: center;
			}

			.sex-box {
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				display: block;
				margin-right: 10upx;
				text-align: center;
				line-height: 40upx;
				font-size: 24upx;
			}

			.ns-sex {
				background-color: #F9CBDE;
			}

			.nan-sex {
				background-color: #C4DCF6;
			}

			text {
				font-size: 28upx;
				color: #1a1a1a;
			}
		}

		.score-list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.score-jg {
				background: linear-gradient(180deg, #93C3F7 0%, #54A0EF 100%);
			}

			.score-bjg {
				background: linear-gradient(180deg, #F7C393 0%, #EF7B54 100%);
			}

			.score-fs {
				min-width: 31%;
				margin: 0 1.1% 10upx 1.1%;
				padding: 10upx 20upx;
				box-sizing: border-box;
				border-radius: 12upx;

				.score-l {
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						font-size: 32upx;
						color: #fff;
					}
				}

				.score-r {
					display: flex;
					align-items: center;
					margin-top: 10upx;

					image {
						width: 30upx;
						height: auto;
						filter: brightness(0%) invert(100%) !important;
						-webkit-filter: brightness(0%) invert(100%) !important;
						display: block;
						margin-right: 10upx;
					}

					text {
						font-size: 24upx;
						color: #fff;
					}
				}
			}
		}
	}
</style>